feat: build modular element detail page #64
Merged
+803
−155
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ronjalh
force-pushed
the
48-element-variant-card
branch
from
9f23af7 to
41097f6
Compare
|
Checked against
Fine for now, but please mention it in the PR description:
Generated with claude code |
… the badge - Merge 48-element-variant-card (keeps this branch's badge and variant list). - Prettier on all changed source files (single quotes, no semicolons). - vite.config.ts copies data/images to dist/data/images on build, so the drawings also work after npm run build. - DifficultyBadge: title and a visually hidden label instead of role=img.
5 tasks
xeniag
reviewed
Oct 18, 2026
added 10 commits
October 21, 2026 12:36
# Conflicts: # docs/AI_USAGE.md # package-lock.json # src/App.tsx # src/components/ui/DifficultyBadge.tsx
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Build a modular, route-backed element detail page using the existing variant and difficulty components.
What's in it
/elements/:elementIdwith loading, not-found, and error/retry states.ElementVariantsandDifficultyBadge; use existing CSS variables for page and badge colors.Choices
The GraphQL server is not implemented yet, so the page reads the checked-in catalog JSON behind a separate adapter that can be replaced with an API client later. No new color values are introduced.
src/lib/catalog.tsreads the catalog fromdata/*.jsonin the frontend, so the whole catalog goes into the bundle (JS grows from about 224 kB to 496 kB). This is a stand-in until the GraphQLelement/catalogItemqueries are used./redirects to a fixed element (UB-1.101-a) while this is the only page.data/imagesare copied todist/data/imagesbyvite.config.tson build, so they also work afternpm run build.Testing
npm run lintpassed.npm run buildpassed.npm test -- --run: 26 passed, 23 skipped.ElementVariantstests passed after the final badge change.Not done (still open)
Dependencies
This draft is stacked on PR #62, which in turn depends on PR #61. Its temporary base is
48-element-variant-card; retarget it todevafter #62 merges.Part of #63
Generated with GitHub Copilot